<template>
  <div :class="wrapClasses"
    >
    <div class="sh-information-wrap" v-outside.capture="()=> isShowNotice = false">

      <Icon type='icon-time' size="30"  @click="noticeClick" v-if="isIcon" />
      <div class="sh-information-num">{{msgNum}}</div>
      <div class="sh-information-msg"
        :style="{width: width+'px', height: height+ 'px'}"
        v-if="isShowNotice"
      >
        <ul class="sh-information-tabs" v-if="tabs">
          <li
            v-for="(item, index) in tabData"
            @click="tabChange(item)"
            >
            <div class="tabs-text">{{item.label}}<span>({{item.num}})</span></div>
            <div class="lint-bar" v-show="checkTab.id ? item.id === checkTab.id : index === 0"></div>
          </li>
        </ul>

        <ul class="sh-information-list" @scroll.stop.passive="onScroll" ref="list">
          <li class="sh-information-list-loading" v-if="isLoad"><Loading v-model="isLoad" size="30"></Loading></li>
          <li class="sh-information-list-empty" v-if="isNoData && !this.$slots.default">{{noDataText? noDataText: t('i.information.noData')}}</li>
          <slot  v-if="!isNoData && !!this.$slots.default"></slot>
          <li class="sh-information-list-content" v-if="!isLoad &&!isNoData && isPullDownLoad"><div class="sh-information-list-content-text">{{pullDownText? pullDownText: t('i.information.loading')}}</div></li>
          <li class="sh-information-list-content" v-if="!isLoad &&!isNoData && isNoMore"><div class="sh-information-list-content-text">{{noMoreText? noMoreText: t('i.information.noMore')}}</div></li>
        </ul>
        <div :class="clearClasses" @click="clearMsg">{{clearText? clearText: t('i.information.clear')}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import outside from '../../../directives/clickoutside'
import Locale from '../../../mixins/locale'
export default {
  name: 'Information',
  mixins: [Locale],
  directives: {
    outside
  },
  props: {
    tabs: {
      type: Boolean,
      defalut: true
    },
    tabData: {
      type: Array,
      default: []
    },
    width: {
      type: [Number],
      default: 300
    },
    height: {
      type: [Number],
      default: 400
    },
    isLoad: {
      type: Boolean,
      default: false
    },
    isPullDown: {
      type: Boolean,
      default: false
    },
    isNoData: {
      type: Boolean,
      default: false
    },
    isNoMore: {
      type: Boolean,
      default: false
    },
    pullDownText: {
      type: String,
      default: ''
    },
    noMoreText: {
      type: String,
      default: ''
    },
    noDataText: {
      type: String,
      default: ''
    },
    clearText: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isShowNotice: false,
      isIcon: true,
      isShowTabs: false,
      checkTab: {},
      isPullDownLoad: this.isPullDown
    }
  },
  watch: {
    isPullDown: function (nVal) {
      this.isPullDownLoad = nVal
      if (nVal) {
        this.$nextTick(() => {
          this.setScrollTop()
        })
      }
    }
  },
  computed: {
    wrapClasses () {
      return [
        'sh-information'
      ]
    },
    clearClasses () {
      return [
        'sh-clear',
        {
          'sh-Banned-click': !this.isLoad && !this.$slots.default
        }
      ]
    },
    msgNum () {
      let num = 0
      for (let i = 0; i < this.tabData.length; i++) {
        num += this.tabData[i].num
      }
      return num
    }
  },
  updated () {
  },
  mounted () {
    this.setCheckTab()
  },
  methods: {
    noticeClick () {
      this.isShowNotice = !this.isShowNotice
    },
    detailsMsg (val) {
      this.$emit('on-details', val)
    },
    clearMsg () {
      this.$emit('on-clear', this.checkTab)
    },
    tabChange (val) {
      if (val.id !== this.checkTab.id) {
        this.checkTab = val
        this.$emit('tab-change', val)
      }
    },
    setCheckTab () {
      if (this.tabData) {
        let tabitem = this.tabData.filter((k, i) => i === 0)
        this.checkTab = { title: tabitem[0].title, id: tabitem[0].id, num: tabitem[0].num }
      }
    },
    onScroll (e) {
      const sT = e.target.scrollTop
      const cHT = e.target.clientHeight
      const sHT = e.target.scrollHeight
      setTimeout(() => {
        if (Math.abs(cHT + sT - sHT) < 1 && !this.isPullDown && !this.isLoad) {
          this.$emit('pull-down', this.checkTab)
        }
      }, 30)
    },
    setScrollTop (val) {
      this.$nextTick(() => {
        if (this.$refs.list) {
          this.$refs.list.scrollTop = this.$refs.list.scrollHeight
        }
      })
    }
  }
}
</script>
